<template>
  <ElSelect filterable style="width: 100%" v-bind="getAttrs">
    <ElOption
      v-for="item in options"
      :key="item[valueName]"
      :label="item[labelName]"
      :value="item[valueName]"
      :disabled="item[disabledName]"
    >
      <slot :item="item"></slot>
    </ElOption>
  </ElSelect>
</template>

<script setup lang="ts" name="Select">
import { ElSelect, ElOption } from "element-plus";
import { omit } from "lodash";
import { computed, useAttrs } from "vue";
const props = defineProps({
  clearable: {
    type: Boolean,
    default: true
  },
  labelName: {
    type: String,
    default: "label"
  },
  valueName: {
    type: String,
    default: "value"
  },
  disabledName: {
    type: String,
    default: "disabled"
  },
  options: {
    type: Array,
    default: () => []
  },
  optionName: {
    type: String,
    default: "options"
  }
});
const attrs = useAttrs();
const getAttrs = computed(() => {
  return { ...attrs, ...omit(props, ["labelName", "valueName", "disabledName", "options", "optionName"]) };
});
</script>

<style scoped></style>
